var form = document.querySelector('form');
form.onsubmit = function(event){
   event.preventDefault();
   var name = document.querySelector('input:nth-of-type(1)').value;
   var password = document.querySelector('input:nth-of-type(2)').value;
   console.log(name);
   console.log(password);

   //post请求提交数据
   var req = new XMLHttpRequest();
   req.onreadystatechange = function(){
       if(req.readyState == 4){
           var data = JSON.parse(req.responseText);
           if(data.result==1){
               location.href = './home.html';
           }else{
               alert(data.message);
           }
       }
   }
   req.open('POST','api/login.php');
    //设置请求头
    // para1：key ;
    // para2:value 
    // Content-Type:指明浏览器发送到服务器的数据的类型
    // application/x-www-form-urlencoded:url编码类型
   req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // para:待发送的数据   
   req.send('name='+name+'&password='+password);
}

// get 与 post 的区别：
// 1)post安全性高：get请求数据在url后，可以在地址栏看到，
// 而post请求数据在请求体中，因此相对安全。
// 2)post发送数据量更大：url长度有限制，造成get请求数据量
// 有限制，而post请求数据在请求体中，无限制，因此数据量更大。